<template>
  <el-container>
    <el-main>
      <el-row
        type="flex"
        justify="center"
        align="middle"
        :style="{ height: windowHeight }"
      >
        <el-col class="login-box" :span="8">
          <h1 class="title-center">智慧养老后台管理系统</h1>
          <el-form ref="form" :model="form" :rules="rules" label-width="55px">
            <el-form-item label="账号:" prop="name">
              <el-input v-model="form.name" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item label="密码:" prop="password">
              <el-input
                v-model="form.password"
                type="password"
                placeholder="请输入密码"
                show-password
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                class="mybtn-width"
                type="primary"
                @click="submit('form')"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      windowHeight: 0,
      form: {
        name: "",
        password: "",
      },
      //验证规则的设置
      rules: {
        name: [
          { required: true, message: "必须输入账号", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "账号的长度在3 - 10 位字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "必须输入密码", trigger: "blur" },
          {
            min: 6,
            max: 6,
            message: "密码的长度是 6 位字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios
            .post(
              "/login",
              JSON.stringify({
                username: this.form.name,
                password: this.form.password,
              }),
              {
                headers: { "content-type": "application/json;charset=UTF-8" },
              }
            )
            .then((res) => {
              console.log(res.data)
              if (res.data.code == 0) {
                this.$message({
                  type: "success",
                  duration: 500,
                  message: "登录成功",
                });
                sessionStorage.setItem("token", res.data.data);
                let that = this;
                setTimeout(function () {
                  that.$router.push("/main");
                }, 1000);
              } else {
                this.$message({
                  type: "warning",
                  duration: 3000,
                  message: "登录失败",
                });
              }
              // console.log(res);
            })
            .catch((err) => console.log(err));
        } else {
          this.$message.error("验证失败!");
        }
      });
    },
  },
  created() {
    this.windowHeight = window.innerHeight - 41 + "px";
    window.onresize = function () {
      this.windowHeight = window.innerHeight - 41 + "px";
    };
  },
};
</script>

<style lang="less" scoped>
.login-box {
  border: 1px solid #ebeef5;
  border-radius: 5px;
  padding: 40px;
  min-width: 500px;
}
.title-center {
  text-align: center;
  color: #409eff;
  margin-bottom: 20px;
}
.mybtn-width {
  width: 100%;
}
</style>